<div ng-controller="PageManagementCtrl">
    <div class="toolbar">
        Page Manager <span class="info newHelp" help help-content="{{help.pageManagement}}"></span>
        <div>
            <select id="applicationNameChoice" ng-model="data.applicationName" ng-options="applicationName for applicationName in appNames" ng-change="changePage()" ng-if="appNames.length > 1">
                <option value="">Select an Application</option>
            </select>
            <span style="font-weight: bold; top: 2px; position: relative;" ng-if="appNames.length === 1">{{appNames[0]}}</span>
            </span>
        </div>
    </div>
    <div class="pageManagementColumn">
        Step 1: Select a Page <span class="info newHelp" help help-content="{{help.pageManagementSelectPage}}"></span>
        <div id="pageSelectionList">
            <select size="10" ng-model="data.selectedPage" ng-options="page.name for page in pages" ng-change="onSelectPage();">
                <option value="" ng-if="false"></option>
            </select>
        </div>
    </div>
    <div class="pageManagementColumn" style="padding-left: 50px;">
        Step 2: Manage your Page <span class="info newHelp" help help-content="{{help.pageManagementManagePage}}"></span>
        <div id="pageManagementList">
            <select multiple size="10" ng-model="data.selectedExperiments" ng-options="experiment.label for experiment in experiments" ng-change="onSelectExperiment();">
                <option value="" ng-if="false"></option>
            </select>
        </div>
        <table class="buttonTable">
            <tbody>
            <tr><td ng-click="addExperimentToPage();">+</td><td ng-click="removeExperimentsFromPage();">-</td><td style="width: 70%;">&nbsp;</td></tr>
            </tbody>
        </table>
    </div>
</div>

